import React, { Component } from "react";
import { Card, Modal, Button } from "antd";
const { confirm } = Modal;

function info() {
  Modal.info({
    title: "This is a notification message",
    content: (
      <div>
        <p>some messages...some messages...</p>
        <p>some messages...some messages...</p>
      </div>
    ),
    onOk() {}
  });
}

function success() {
  Modal.success({
    content: "some messages...some messages..."
  });
}

function error() {
  Modal.error({
    title: "This is an error message",
    content: "some messages...some messages..."
  });
}

function warning() {
  Modal.warning({
    title: "This is a warning message",
    content: "some messages...some messages..."
  });
}

function showConfirm() {
  confirm({
    title: "Do you want to delete these items?",
    content:
      "When clicked the OK button, this dialog will be closed after 1 second",
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
      }).catch(() => console.log("Oops errors!"));
    },
    onCancel() {}
  });
}

export default class modals extends Component {
  state = { visible: false };

  showModal = () => {
    this.setState({
      visible: true
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };

  setModal1Visible(modal1Visible) {
    this.setState({ modal1Visible });
  }

  setModal2Visible(modal2Visible) {
    this.setState({ modal2Visible });
  }
  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
      modal1Visible: false,
      modal2Visible: false
    });
  };
  render() {
    return (
      <div>
        <Card title="对话框">
          <Button type="primary" onClick={this.showModal}>
            基础对话框
          </Button>
          <Modal
            title="Basic Modal"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
          >
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Modal>
        </Card>

        <Card title="信息提示">
          <Button onClick={info}>Info</Button>
          <Button onClick={success}>Success</Button>
          <Button onClick={error}>Error</Button>
          <Button onClick={warning}>Warning</Button>
        </Card>

        <Card title="确认对话框">
          <Button onClick={showConfirm}>Confirm 异步</Button>
        </Card>

        <Card title="自定义位置">
          <Button type="primary" onClick={() => this.setModal1Visible(true)}>
            Display a modal dialog at 20px to Top
          </Button>
          <Modal
            title="20px to Top"
            style={{ top: 20 }}
            visible={this.state.modal1Visible}
            onOk={() => this.setModal1Visible(false)}
            onCancel={() => this.setModal1Visible(false)}
          >
            <p>some contents...</p>
            <p>some contents...</p>
            <p>some contents...</p>
          </Modal>

          <Button type="primary" onClick={() => this.setModal2Visible(true)}>
            Vertically centered modal dialog
          </Button>
          <Modal
            title="Vertically centered modal dialog"
            centered
            visible={this.state.modal2Visible}
            onOk={() => this.setModal2Visible(false)}
            onCancel={() => this.setModal2Visible(false)}
          >
            <p>some contents...</p>
            <p>some contents...</p>
            <p>some contents...</p>
          </Modal>
        </Card>
      </div>
    );
  }
}
